<template>
	<div>
		<!--引用表格-->
		<BasicTable @register="registerTable" :rowSelection="rowSelection">
			<template #tableTitle>
				<a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls"> 导出</a-button>
			</template>
			<template #form-operatorIdSlot="{model, field}">
				<a-select ref="select" v-model:value="model[field]" placeholder="请选择运营商">
					<a-select-option v-for="item in operatorIdList" :value="item.value">{{ item.label }}</a-select-option>
				</a-select>
			</template>
			<template #form-warnCnNameSlot="{model, field}">
				<a-select ref="select" v-model:value="model[field]" placeholder="请选择告警原因">
					<a-select-option v-for="item in warnCnNameList" :value="item">{{ item }}</a-select-option>
				</a-select>
			</template>
			<template #form-stationIdSlot="{model, field}">
				<a-select ref="select" v-model:value="model[field]" placeholder="请选择充电站">
					<a-select-option v-for="item in stationIdList" :value="item.value">{{ item.label }}</a-select-option>
				</a-select>
			</template>
			<!--插槽:table标题-->

			<!--操作栏-->
			<template #action="{record}">
				<TableAction :actions="getTableAction(record)" />
			</template>
			<!--字段回显插槽-->
			<template v-slot:bodyCell="{column, record, index, text}"> </template>
			<template #warnCnName_dictText="{record}">
				<a @click="opendrawer(record)">{{ record.warnCnName }}</a>
			</template>
		</BasicTable>
		<!-- 表单区域 -->
		<FrWarningInfoModal @register="registerModal" @success="handleSuccess"></FrWarningInfoModal>
		<!-- 字典弹窗 -->
		<DictItemList @register="registerDrawer" />
		<a-modal width="800px" style="top: 20px; text-align: center" v-model:open="modalopen" title="评估报告" @ok="modalopen = false">
			<iframe width="700px" style="height: 800px; overflow-y: scroll" :src="iframeurl" frameborder="0"></iframe>
		</a-modal>
		<!-- <a-drawer title="预警详情" width="1040" :open="draweropen" @close="draweropen = false">
      <template #extra>
        <a-button preIcon="ant-design:book-outlined" style="margin-right: 8px" type="primary">

          充电订单</a-button>
      </template>
      <p>Some contents...</p>
      <p>Some contents...</p>
      <p>Some contents...</p>
    </a-drawer> -->
	</div>
</template>

<script lang="ts" name="frWarningInfo" setup>
import {ref, reactive, computed, unref} from 'vue';
import {BasicTable, useTable, TableAction} from '/@/components/Table';
import {useModal} from '/@/components/Modal';
import {useListPage} from '/@/hooks/system/useListPage';
import FrWarningInfoModal from './components/FrWarningInfoModal.vue';
import {columns, searchFormSchema, superQuerySchema} from './FrWarningInfo.data';
import {list, deleteOne, batchDelete, getImportUrl, getExportUrl, getAllWarnReason} from './FrWarningInfo.api';

const queryParam = reactive<any>({});
const checkedKeys = ref<Array<string | number>>([]);
// 抽屉
const draweropen = ref(false);
import {useDrawer} from '/src/components/Drawer';

import DictItemList from './components/drawer1.vue';

const [registerDrawer, {openDrawer}] = useDrawer();
function opendrawer(record) {
	console.log('opendrawer-opendrawer', record);
	openDrawer(true, record);
}

//注册model
const [registerModal, {openModal}] = useModal();
//注册table数据
const {prefixCls, tableContext, onExportXls, onImportXls} = useListPage({
	tableProps: {
		loading: true,
		title: '充电预警记录',
		api: list,
		columns,
		canResize: false,
		formConfig: {
			//labelWidth: 120,
			schemas: searchFormSchema,
			autoSubmitOnEnter: true,
			showAdvancedButton: true,
			fieldMapToNumber: [],
			fieldMapToTime: [],
		},
		actionColumn: {
			width: 120,
			fixed: 'right',
		},
		beforeFetch: (params) => {
			return Object.assign(params, queryParam);
		},
	},
	exportConfig: {
		name: '预警列表',
		url: getExportUrl,
		params: queryParam,
	},
	importConfig: {
		url: getImportUrl,
		success: handleSuccess,
	},
});
import {useYewuStore} from '/@/store/modules/yewu';
const YewuStor = useYewuStore();
// 充电站查询列表
const stationIdList = ref<any>([]);
// 运营商查询列表
const operatorIdList = ref<any>([]);
const warnCnNameList = ref<any>([]);
onMounted(() => {
	getAllWarnReason().then((res) => {
		console.log('getAllWarnReason', res);
		warnCnNameList.value = res;
	});
	setTimeout(() => {
		operatorIdList.value = YewuStor.operatorIdList;
		stationIdList.value = YewuStor.stationIdList;
	}, 2000);
});
const [registerTable, {reload}, {rowSelection, selectedRowKeys}] = tableContext;

// 高级查询配置
const superQueryConfig = reactive(superQuerySchema);

/**
 * 高级查询事件
 */
function handleSuperQuery(params) {
	Object.keys(params).map((k) => {
		queryParam[k] = params[k];
	});
	reload();
}
/**
 * 新增事件
 */
function handleAdd() {
	openModal(true, {
		isUpdate: false,
		showFooter: true,
	});
}
const modalopen = ref(false);

/**
 * 编辑事件
 */
const iframeurl = ref('https://www.chargesystem.cn/weixinh5/index.html');
function handleEdit(record: Recordable) {
	// https://www.chargesystem.cn/weixinh5/index.html
	iframeurl.value = 'https://www.chargesystem.cn/weixinh5/index.html?pcVin=' + record.vin;
	modalopen.value = true;
	// openModal(true, {
	// 	record,
	// 	isUpdate: true,
	// 	showFooter: true,
	// });
}
/**
 * 详情
 */
function handleDetail(record: Recordable) {
	openModal(true, {
		record,
		isUpdate: true,
		showFooter: false,
	});
}
/**
 * 删除事件
 */
async function handleDelete(record) {
	await deleteOne({id: record.id}, handleSuccess);
}
/**
 * 批量删除事件
 */
async function batchHandleDelete() {
	await batchDelete({ids: selectedRowKeys.value}, handleSuccess);
}
/**
 * 成功回调
 */
function handleSuccess() {
	(selectedRowKeys.value = []) && reload();
}
/**
 * 操作栏
 */
function getTableAction(record) {
	return [
		{
			label: '评估报告',
			onClick: handleEdit.bind(null, record),
		},
	];
}
/**
 * 下拉操作栏
 */
function getDropDownAction(record) {
	return [
		{
			label: '详情',
			onClick: handleDetail.bind(null, record),
		},
		{
			label: '删除',
			popConfirm: {
				title: '是否确认删除',
				confirm: handleDelete.bind(null, record),
				placement: 'topLeft',
			},
		},
	];
}
</script>

<style lang="less" scoped>
:deep(.ant-picker),
:deep(.ant-input-number) {
	width: 100%;
}
</style>
